<template>
  <div class="pageItemBody">
    <div class="pageItemBodyInner" ref="inner" v-if="show">
      <div class="itemMain">
        <slot></slot>
      </div>
    </div>
    <div class="bg2"></div>
    <!--    向下展开的背景-->
    <div class="bg" ref="bg" v-if="!show"></div>
  </div>
</template>

<script>
import itemTitle from "./itemTitle/index.vue";
import gsap from "gsap";

export default {
  name: "title",
  data() {
    return {
      show: false
    }
  },
  components: {
    itemTitle
  },
  props: {
    title: {
      type: String,
      default() {
        return '';
      }
    },
    delay: {
      type: Number,
      default() {
        return 0;
      }
    },
    duration: {
      type: Number,
      default() {
        return 0.5;
      }
    },
  },
  watch: {},
  mounted() {
    var that = this;
    gsap.to(this.$refs.bg, {
      height: '100%',
      delay: that.delay,
      duration: that.duration, // 动画持续时间（以秒为单位）
      ease: 'none', // 使用线性动画缓动函数
      onComplete: () => {
        // 动画完成后触发的回调函数
        console.log('动画执行完成');
        setTimeout(() => {
          that.show = true
          // 添加新的 GSAP 动画来改变透明度
          that.$nextTick(() => {
            gsap.to(that.$refs.inner, {
              opacity: 1,
              duration: 1, // 这里可以设置渐显动画的持续时间
            });
          })
        }, 100)
      },
    });
  },
}
</script>

<style lang="scss" scoped>
.pageItemBody {
  width: 100%;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  z-index: 1;
  align-content: flex-start;

}

.itemMain {
  position: relative;
  width: 100%;
  height: calc(100% - 0px);
}

.pageItemBodyInner {
  width: 100%;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  z-index: 1;
  align-content: flex-start;
  opacity: 0;
  background: rgba(1, 24, 40, 0.8) no-repeat;
  border: 1px solid rgba(#166994, 0.7);

  .bg2 {
    position: absolute;
    bottom: 0;
    left: 0;
    background: url("./assets/itembg.png") left bottom no-repeat;
    width: 632px;
    height: 235px;
    z-index: -1;
  }
}

.bg {
  height: 0%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, rgba(1, 24, 40, 0.3), rgba(1, 24, 40, 0.6));
}
</style>

